<script>
import * as utils from '@/utils/helps';

export default {
  name: 'DashTableHeader',
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      },
    },
    columnStyle: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      scrollWidth: utils.getScrollBarSize(),
    };
  },
  computed: {
    rowStyle() {
      return {
        height: `${this.columnStyle.height}px`,
        fontSize: this.columnStyle.fontSize,
        color: this.columnStyle.color,
        backgroundColor: this.columnStyle.backgroundColor,
        fontWeight: this.columnStyle.fontWeight,
        textAlign: this.columnStyle.textAlign,
      };
    },
    cellStyle() {
      return {
        borderColor: this.columnStyle.borderColor,
        borderWidth: `${this.columnStyle.borderWidth}px`,
        borderStyle: this.columnStyle.borderStyle,
      };
    },
  },
};
</script>
<template>
  <div class="dash-table-columns">
    <table
      cellspacing="0"
      cellpadding="0"
      border="0">
      <colgroup>
        <col
          v-for="(item,index) in columns"
          :key="index"
          :width="item._width" />
        <col
          v-if="$parent.showVerticalScrollBar"
          :width="scrollWidth" />
      </colgroup>
      <thead>
        <tr :style="rowStyle">
          <th
            v-for="(item,index) in columns"
            :key="index"
            :style="cellStyle">
            <span>{{ item.title }}</span>
            <span
              v-if="$parent.sortable"
              class="k-table-sort">
              <i
                :class="{on:columns[index]._sortType=='asc'}"
                class="k-icon k-icon-arrow-up-b"
                @click="$parent.sortData(index,'asc')"></i>
              <i
                :class="{on:columns[index]._sortType=='desc'}"
                class="k-icon k-icon-arrow-down-b"
                @click="$parent.sortData(index,'desc')"></i>
            </span>
          </th>
          <th
            v-if="
            $parent.showVerticalScrollBar"
            :style="cellStyle"></i></span></i></th>
        </tr>
      </thead>
    </table>
  </div>
</template>
<style lang="less">
.dash-table-columns {
  overflow: hidden;
  table {
    width: 100%;
    table-layout: fixed;
    tr {
      background-color: #eceff1;
      th {
        height: 32px;
        border-collapse: collapse;
        white-space: nowrap;
        overflow: hidden;
        word-break: keep-all;
        border-left: 0 !important;
        &:last-child {
          border-right: 0 !important;
        }
      }
    }
  }
}
</style>
